import React from 'react'

//style抽取方式
 // 一: 抽取成对象,样式对象与UI结构分离
 // 二: 抽取成对象属性,合并成大的样式对象

// 第一次封装style
const itemStyle = {border:'1px dashed #ccc',margin: '10px', padding:'10ox', boxShadow:'0 0 10px #ccc'};
const userStyle = {fontSize: '14px'};
const comtentStyle = {fontSize: '12px'};
// 第二次封装,合并成大的样式对象
/*const styles = {
    item: {border:'1px dashed #ccc',margin: '10px', padding:'10ox', boxShadow:'0 0 10px #ccc'},
    user: {fontSize: '14px'},
    content: {fontSize: '12px'}
}*/
// 抽取为单独的样式表模块
// 第三层
import styles from '@/components/styles'

// 自定义无状态组件 => 子评论项 (每个数据都是通过item项获取)
export default function CmtItem(props) {
    return <div style={styles.item}>
        <h1 style={userStyle}>评论人:{props.user}</h1>
        <p style={comtentStyle}>评论内容:{props.content}</p>
    </div>
}